<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模拟</title>
</head>


<body>

  <canvas id="solar" width="500" height="500"></canvas>
  <script>
    let sun;
    let earth;
    let moon;
    let ctx;
    function init() {
      sun = new Image();
      earth = new Image();
      moon = new Image();
      sun.src = "sun.png";
      earth.src = "earth.png";
      moon.src = "moon.png";

      let canvas = document.querySelector("#solar");
      ctx = canvas.getContext("2d");

      sun.onload = function () {
        draw()
      }

    }
    init();
    function draw() {
      ctx.clearRect(0, 0, 300, 300); //清空所有的内容

      ctx.save();
      // 绘制太阳系
      ctx.drawImage(sun, 0, 0, 300, 300)

      // 绘制地球轨道 和地球
      ctx.beginPath();
      ctx.translate(150, 150);
      ctx.arc(0, 0, 100, 0, Math.PI * 2);
      ctx.strokeStyle = "rgba(255,255,0,0.5)"
      ctx.stroke();

      let time = new Date();
      
      // 地球
      ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
      ctx.translate(100, 0);
      ctx.drawImage(earth, -12, -12, 20, 20)


      // 绘制月球轨道 和月球
      ctx.beginPath();
      ctx.arc(0, 0, 40, 0, Math.PI * 2)
      ctx.strokeStyle = "rgba(255,255,255,.3)"
      ctx.stroke();

      // 月球
      ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
      ctx.translate(40, 0);
      ctx.drawImage(moon, -3.5, -3.5, 10, 10)

      ctx.restore();

      requestAnimationFrame(draw);
    }
  </script>
</body>

</html>
